<template>
  <el-card shadow="never">
    <el-form :model="form">
      <el-form-item label="搜索名称：">
        <el-input v-model="form.name" />
      </el-form-item>
      <el-form-item label="商品类型：">
        <el-select v-model="form.region" placeholder="全部商品">
          <el-option label="全部商品" value="0" />
          <el-option label="竹香酒" value="1" />
          <el-option label="筷子" value="2" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查找</el-button>
      </el-form-item>
    </el-form>
  </el-card>
  <div class="goods">
    <el-table :data="tableData" border>
      <el-table-column prop="id" label="序号" width="70" />
      <el-table-column prop="name" label="产品" width="180" />
      <el-table-column prop="type" label="规格" width="100" />
      <el-table-column prop="item" label="小件数量" width="100" />
      <el-table-column prop="number" label="大件数量" width="100" />
      <el-table-column prop="address" label="仓库地点" width="200" />
      <el-table-column prop="date" label="最后进货日期" width="120" />
    </el-table>
  </div>
  <div class="pagination">
    <el-pagination background layout="prev, pager, next" :total="30" class="mt-4" />
  </div>
</template>

<script setup>
import { reactive } from 'vue'
const form = reactive({
  name: '',
  region: ''
})

const onSubmit = () => {
  console.log('submit!')
}

const tableData = [
  {
    id: '1',
    name: '竹香酒三年',
    type: '240ML',
    item: '240瓶',
    number: '40箱',
    address: 'No. 189, Grove St, Los Angeles',
    date: '2016-05-03'
  },
  {
    id: '2',
    name: '竹香酒五年',
    type: '480ML',
    item: '240瓶',
    number: '40箱',
    address: 'No. 189, Grove St, Los Angeles',
    date: '2016-05-02'
  },
  {
    id: '3',
    name: '竹香酒一年',
    type: '240ML',
    item: '240瓶',
    number: '40箱',
    address: 'No. 189, Grove St, Los Angeles',
    date: '2016-05-04'
  },
  {
    id: '4',
    name: '竹香酒十年',
    type: '480ML',
    item: '240瓶',
    number: '40箱',
    address: 'No. 189, Grove St, Los Angeles',
    date: '2016-05-01'
  }
]
</script>

<style lang="scss" scoped>
.search {
  margin: 2rem;
  background: #fff;
  padding-top: 1.8rem;
  border-radius: 1rem;
  .el-form {
    display: flex;
    margin: 0 1.8rem;
    &-item {
      margin-right: 3rem;
    }
  }
}
.el-select {
  width: 15rem;
}
.goods {
  margin: 2rem;
  background: #fff;
  border-radius: 1rem;
  .el-table {
    padding: 1.8rem;
    border-radius: 1rem;
  }
}
.pagination {
  display: flex;
  margin: 1.8rem;
  padding: 0 1.8rem;
  justify-content: flex-end;
}
</style>
